import { lazy, Suspense, useState, useMemo } from 'react'
import { Tabs, TabsContent } from '@/components/ui/tabs'
import Sidebar from '@/components/layout/Sidebar'
import MusicPlayer from './components/layout/MusicPlayer'
import { Loading } from '@/components/ui/loading'
import { Toaster } from '@/components/ui/sonner'
import { Box as HomeIcon, Download as ManageIcon, View as UIIcon, Info as AboutIcon, Settings as SettingsIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import '@/styles/globals.css'

const Home = lazy(() => import('@/pages/home'))
const Manage = lazy(() => import('@/pages/manage'))
const Settings = lazy(() => import('@/pages/settings'))
const UI = lazy(() => import('@/pages/ui'))
const NotFound = lazy(() => import('@/pages/not-found'))

export default function App(): JSX.Element {

  const tabs = useMemo(() => [
    {
      label: '首页',
      key: 'home',
      path: '/',
      icon: HomeIcon,
      content: <Suspense fallback={<Loading></Loading>}><Home></Home></Suspense>
    },
    {
      label: '资源管理',
      key: 'manage',
      path: '/manage',
      icon: ManageIcon,
      content: <Suspense fallback={<Loading></Loading>}><Manage></Manage></Suspense>
    },
    {
      label: '设置',
      key: 'settings',
      path: '/settings',
      icon: SettingsIcon,
      content: <Suspense fallback={<Loading></Loading>}><Settings></Settings></Suspense>
    },
    // {
    //   label: '组件预览',
    //   key: 'ui',
    //   path: '/ui',
    //   icon: UIIcon,
    //   content: <Suspense fallback={<Loading></Loading>}><UI></UI></Suspense>
    // },
    // {
    //   label: '关于',
    //   key: 'about',
    //   path: '/about',
    //   icon: AboutIcon,
    //   content: <Suspense fallback={<Loading></Loading>}><NotFound></NotFound></Suspense>
    // }
  ], [])

  const [activeTab, setActiveTab] = useState<string>(tabs[0].key)

  const playerComponent = useMemo(() => {
    return <MusicPlayer></MusicPlayer>
  }, [])

  return <div className='w-full h-full flex flex-col'>
    <Tabs
      orientation='vertical'
      defaultValue={activeTab}
      className='w-full h-[calc(100%-6rem)] flex flex-row'
      onValueChange={setActiveTab}
    >
      <Sidebar tabs={tabs} />
      <main className='main-container'>
        <div className='main-content'>
          {tabs.map((tab) => (
            <TabsContent
              key={tab.key}
              className={cn('w-full h-full',
                activeTab === tab.key ? 'visible' : 'hidden')}
              value={tab.key}
              forceMount
            >
              {tab.content}
            </TabsContent>
          ))}
        </div>
      </main>
    </Tabs>
    {playerComponent}
    <Toaster expand richColors position='top-right' />
  </div>
}
